```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>前端技术指南：Validate插件与Bootstrap框架</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.6;
        }
        h1, h2, h3, h4, h5, h6 {
            font-family: 'Noto Serif SC', serif;
            font-weight: 600;
        }
        .hero {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        .code-block {
            background-color: #f8f9fa;
            border-radius: 6px;
            padding: 1rem;
            font-family: monospace;
            overflow-x: auto;
        }
        .card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border-radius: 8px;
            overflow: hidden;
        }
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }
        .nav-pills .nav-link.active {
            background-color: #667eea;
        }
        .table-responsive {
            overflow-x: auto;
        }
        footer {
            background-color: #2d3748;
            color: white;
        }
        footer a:hover {
            color: #a0aec0;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="hero py-20 px-4 md:px-0">
        <div class="container mx-auto max-w-5xl text-center">
            <h1 class="text-4xl md:text-5xl font-bold mb-6">前端技术指南</h1>
            <p class="text-xl md:text-2xl mb-8 opacity-90">掌握Validate插件与Bootstrap框架的核心要点</p>
            <div class="flex justify-center space-x-4">
                <a href="#validate" class="px-6 py-3 bg-white text-blue-700 font-medium rounded-full hover:bg-gray-100 transition">Validate插件</a>
                <a href="#bootstrap" class="px-6 py-3 bg-transparent border-2 border-white text-white font-medium rounded-full hover:bg-white hover:text-blue-700 transition">Bootstrap框架</a>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <div class="container mx-auto max-w-5xl px-4 py-12">
        <!-- Validate Plugin Section -->
        <section id="validate" class="mb-20">
            <div class="flex items-center mb-8">
                <div class="bg-blue-100 p-3 rounded-full mr-4">
                    <i class="fas fa-check-circle text-blue-600 text-2xl"></i>
                </div>
                <h2 class="text-3xl font-bold text-gray-800">Validate插件</h2>
            </div>

            <div class="grid md:grid-cols-2 gap-8 mb-12">
                <div class="card bg-white p-6 shadow-md">
                    <h3 class="text-xl font-semibold mb-4 text-blue-600 flex items-center">
                        <i class="fas fa-info-circle mr-2"></i> 概述
                    </h3>
                    <p class="mb-4 text-gray-700">jQuery Validate是历史悠久且广受好评的表单验证插件，提供了强大的表单验证功能。</p>
                    <ul class="space-y-2 text-gray-700">
                        <li class="flex items-start">
                            <i class="fas fa-check text-green-500 mr-2 mt-1"></i>
                            <span>19类内置验证规则</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check text-green-500 mr-2 mt-1"></i>
                            <span>支持自定义验证规则</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check text-green-500 mr-2 mt-1"></i>
                            <span>灵活的提示信息配置</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check text-green-500 mr-2 mt-1"></i>
                            <span>支持实时验证</span>
                        </li>
                    </ul>
                </div>

                <div class="card bg-white p-6 shadow-md">
                    <h3 class="text-xl font-semibold mb-4 text-blue-600 flex items-center">
                        <i class="fas fa-cog mr-2"></i> 使用步骤
                    </h3>
                    <ol class="space-y-3 text-gray-700">
                        <li class="flex items-start">
                            <span class="bg-blue-100 text-blue-800 rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">1</span>
                            导入jQuery和validate.js文件
                        </li>
                        <li class="flex items-start">
                            <span class="bg-blue-100 text-blue-800 rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">2</span>
                            页面加载后对表单调用validate()方法
                        </li>
                        <li class="flex items-start">
                            <span class="bg-blue-100 text-blue-800 rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">3</span>
                            在validate()中配置rules和messages
                        </li>
                    </ol>
                    <div class="mt-4 code-block">
                        <pre><code>$("#formId").validate({
    rules: {
        username: "required"
    },
    messages: {
        username: "请输入用户名"
    }
});</code></pre>
                    </div>
                </div>
            </div>

            <div class="card bg-white p-6 shadow-md mb-8">
                <h3 class="text-xl font-semibold mb-4 text-blue-600 flex items-center">
                    <i class="fas fa-list-alt mr-2"></i> 校验规则
                </h3>
                <div class="table-responsive">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">属性</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">描述</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700 font-medium">required:true</td>
                                <td class="px-6 py-4 whitespace-normal text-sm text-gray-700">必输字段</td>
                            </tr>
                            <tr class="bg-gray-50">
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700 font-medium">email:true</td>
                                <td class="px-6 py-4 whitespace-normal text-sm text-gray-700">必须输入正确格式的电子邮件</td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700 font-medium">url:true</td>
                                <td class="px-6 py-4 whitespace-normal text-sm text-gray-700">必须输入正确格式的网址</td>
                            </tr>
                            <tr class="bg-gray-50">
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700 font-medium">digits:true</td>
                                <td class="px-6 py-4 whitespace-normal text-sm text-gray-700">必须输入整数</td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700 font-medium">equalTo:"#field"</td>
                                <td class="px-6 py-4 whitespace-normal text-sm text-gray-700">输入值必须和#field相同</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="card bg-white p-6 shadow-md">
                <h3 class="text-xl font-semibold mb-4 text-blue-600 flex items-center">
                    <i class="fas fa-code mr-2"></i> 示例代码
                </h3>
                <div class="code-block mb-4">
                    <pre><code>$(function(){
    $("#formId").validate({
        rules:{
            username: "required",
            password: {required:true, digits:true},
            repassword: {equalTo:"[name='password']"},
            zxz: {min:3, required:true},
            shuzhiqujian: {range:[5,10], required:true}
        },
        messages:{
            username: "用户名不能为空",
            password: {required:"请输入密码", digits:"密码必须为数字"},
            zxz: {min:"最小值应该大于{0}"},
            shuzhiqujian: {range:"值应该在{0}-{1}之间!"}
        },
        submitHandler: function(form){
            $(form).serializeArray()
        }
    });
});</code></pre>
                </div>
                <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <i class="fas fa-exclamation-circle text-yellow-500"></i>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm text-yellow-700">
                                注意：使用前需确保已导入jquery.js、validate.js和messages_zh.js（中文提示库）。
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Bootstrap Section -->
        <section id="bootstrap">
            <div class="flex items-center mb-8">
                <div class="bg-purple-100 p-3 rounded-full mr-4">
                    <i class="fab fa-bootstrap text-purple-600 text-2xl"></i>
                </div>
                <h2 class="text-3xl font-bold text-gray-800">Bootstrap框架</h2>
            </div>

            <div class="card bg-white p-6 shadow-md mb-8">
                <h3 class="text-xl font-semibold mb-4 text-purple-600 flex items-center">
                    <i class="fas fa-info-circle mr-2"></i> 概述
                </h3>
                <div class="grid md:grid-cols-2 gap-6">
                    <div>
                        <p class="mb-4 text-gray-700">Bootstrap是用于快速开发Web应用程序和网站的前端框架，基于HTML、CSS和JavaScript。</p>
                        <ul class="space-y-2 text-gray-700">
                            <li class="flex items-start">
                                <i class="fas fa-check text-green-500 mr-2 mt-1"></i>
                                <span>移动设备优先</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check text-green-500 mr-2 mt-1"></i>
                                <span>响应式设计</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check text-green-500 mr-2 mt-1"></i>
                                <span>丰富的预定义组件</span>
                            </li>
                        </ul>
                    </div>
                    <div>
                        <div class="bg-gray-100 p-4 rounded-lg">
                            <h4 class="font-medium text-gray-800 mb-2">使用步骤：</h4>
                            <ol class="list-decimal list-inside text-gray-700 space-y-1">
                                <li>下载Bootstrap</li>
                                <li>导入bootstrap.css</li>
                                <li>导入jquery.js</li>
                                <li>导入bootstrap.js</li>
                                <li>内容放入布局容器中</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>

            <div class="grid md:grid-cols-2 gap-8 mb-8">
                <div class="card bg-white p-6 shadow-md">
                    <h3 class="text-xl font-semibold mb-4 text-purple-600 flex items-center">
                        <i class="fas fa-th mr-2"></i> 栅格系统
                    </h3>
                    <p class="mb-4 text-gray-700">Bootstrap将每一行分成12份，通过列的组合来创建页面布局。</p>
                    
                    <div class="mb-4">
                        <h4 class="font-medium text-gray-800 mb-2">屏幕尺寸分类：</h4>
                        <ul class="space-y-2 text-gray-700">
                            <li class="flex items-start">
                                <span class="bg-purple-100 text-purple-800 px-2 py-1 rounded text-xs mr-2">col-xs-*</span>
                                <span>超小屏幕 手机 (&lt;768px)</span>
                            </li>
                            <li class="flex items-start">
                                <span class="bg-purple-100 text-purple-800 px-2 py-1 rounded text-xs mr-2">col-sm-*</span>
                                <span>小屏幕 平板 (≥768px)</span>
                            </li>
                            <li class="flex items-start">
                                <span class="bg-purple-100 text-purple-800 px-2 py-1 rounded text-xs mr-2">col-md-*</span>
                                <span>中等屏幕 (≥992px)</span>
                            </li>
                            <li class="flex items-start">
                                <span class="bg-purple-100 text-purple-800 px-2 py-1 rounded text-xs mr-2">col-lg-*</span>
                                <span>大屏幕 (≥1200px)</span>
                            </li>
                        </ul>
                    </div>
                    
                    <div class="bg-gray-100 p-4 rounded-lg">
                        <h4 class="font-medium text-gray-800 mb-2">示例：</h4>
                        <div class="code-block">
                            <pre><code>&lt;div class="row"&gt;
    &lt;div class="col-md-4"&gt;占4列&lt;/div&gt;
    &lt;div class="col-md-8"&gt;占8列&lt;/div&gt;
&lt;/div&gt;</code></pre>
                        </div>
                    </div>
                </div>

                <div class="card bg-white p-6 shadow-md">
                    <h3 class="text-xl font-semibold mb-4 text-purple-600 flex items-center">
                        <i class="fas fa-edit mr-2"></i> 表单组件
                    </h3>
                    <p class="mb-4 text-gray-700">Bootstrap提供了丰富的表单样式和组件。</p>
                    
                    <div class="space-y-4">
                        <div>
                            <h4 class="font-medium text-gray-800 mb-2">基本表单：</h4>
                            <div class="code-block">
                                <pre><code>&lt;form&gt;
    &lt;div class="form-group"&gt;
        &lt;label&gt;Email地址&lt;/label&gt;
        &lt;input type="email" class="form-control"&gt;
    &lt;/div&gt;
&lt;/form&gt;</code></pre>
                            </div>
                        </div>
                        
                        <div>
                            <h4 class="font-medium text-gray-800 mb-2">水平表单：</h4>
                            <div class="code-block">
                                <pre><code>&lt;form class="form-horizontal"&gt;
    &lt;div class="form-group"&gt;
        &lt;label class="col-sm-2 control-label"&gt;Email&lt;/label&gt;
        &lt;div class="col-sm-10"&gt;
            &lt;input type="email" class="form-control"&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/form&gt;</code></pre>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="grid md:grid-cols-2 gap-8 mb-8">
                <div class="card bg-white p-6 shadow-md">
                    <h3 class="text-xl font-semibold mb-4 text-purple-600 flex items-center">
                        <i class="fas fa-table mr-2"></i> 表格
                    </h3>
                    <p class="mb-4 text-gray-700">Bootstrap提供了多种表格样式。</p>
                    
                    <div class="mb-4">
                        <div class="code-block">
                            <pre><code>&lt;table class="table table-striped table-hover"&gt;
    &lt;tr class="success"&gt;
        &lt;th&gt;类名&lt;/th&gt;
        &lt;th&gt;描述&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;.active&lt;/td&gt;
        &lt;td&gt;悬停颜色&lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;</code></pre>
                        </div>
                    </div>
                    
                    <div class="bg-blue-50 border-l-4 border-blue-400 p-4">
                        <div class="flex">
                            <div class="flex-shrink-0">
                                <i class="fas fa-info-circle text-blue-500"></i>
                            </div>
                            <div class="ml-3">
                                <p class="text-sm text-blue-700">
                                    使用.table-responsive使表格在小屏幕上可横向滚动。
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card bg-white p-6 shadow-md">
                    <h3 class="text-xl font-semibold mb-4 text-purple-600 flex items-center">
                        <i class="fas fa-image mr-2"></i> 图片与按钮
                    </h3>
                    
                    <div class="grid grid-cols-2 gap-4 mb-4">
                        <div>
                            <h4 class="font-medium text-gray-800 mb-2">图片形状：</h4>
                            <div class="code-block">
                                <pre><code>&lt;img class="img-rounded"&gt;
&lt;img class="img-circle"&gt;
&lt;img class="img-thumbnail"&gt;</code></pre>
                            </div>
                        </div>
                        <div>
                            <h4 class="font-medium text-gray-800 mb-2">响应式图片：</h4>
                            <div class="code-block">
                                <pre><code>&lt;img class="img-responsive"&gt;</code></pre>
                            </div>
                        </div>
                    </div>
                    
                    <div>
                        <h4 class="font-medium text-gray-800 mb-2">按钮样式：</h4>
                        <div class="code-block">
                            <pre><code>&lt;button class="btn btn-default"&gt;默认&lt;/button&gt;
&lt;button class="btn btn-primary"&gt;主要&lt;/button&gt;
&lt;button class="btn btn-success"&gt;成功&lt;/button&gt;
&lt;button class="btn btn-info"&gt;信息&lt;/button&gt;
&lt;button class="btn btn-warning"&gt;警告&lt;/button&gt;
&lt;button class="btn btn-danger"&gt;危险&lt;/button&gt;</code></pre>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card bg-white p-6 shadow-md">
                <h3 class="text-xl font-semibold mb-4 text-purple-600 flex items-center">
                    <i class="fas fa-bars mr-2"></i> 导航与分页
                </h3>
                
                <div class="grid md:grid-cols-2 gap-6">
                    <div>
                        <h4 class="font-medium text-gray-800 mb-2">标签式导航：</h4>
                        <div class="code-block">
                            <pre><code>&lt;ul class="nav nav-tabs"&gt;
    &lt;li class="active"&gt;
        &lt;a href="#home" data-toggle="tab"&gt;首页&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href="#profile" data-toggle="tab"&gt;简介&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</code></pre>
                        </div>
                        
                        <h4 class="font-medium text-gray-800 mt-4 mb-2">面包屑导航：</h4>
                        <div class="code-block">
                            <pre><code>&lt;ol class="breadcrumb"&gt;
    &lt;li&gt;&lt;a href="#"&gt;首页&lt;/a&gt;&lt;/li&gt;
    &lt;li class="active"&gt;当前页&lt;/li&gt;
&lt;/ol&gt;</code></pre>
                        </div>
                    </div>
                    
                    <div>
                        <h4 class="font-medium text-gray-800 mb-2">分页：</h4>
                        <div class="code-block">
                            <pre><code>&lt;nav aria-label="Page navigation"&gt;
    &lt;ul class="pagination"&gt;
        &lt;li&gt;
            &lt;a href="#" aria-label="Previous"&gt;
                &lt;span&gt;&laquo;&lt;/span&gt;
            &lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;
            &lt;a href="#" aria-label="Next"&gt;
                &lt;span&gt;&raquo;&lt;/span&gt;
            &lt;/a&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
&lt;/nav&gt;</code></pre>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card bg-white p-6 shadow-md mt-8">
                <h3 class="text-xl font-semibold mb-4 text-purple-600 flex items-center">
                    <i class="fas fa-cubes mr-2"></i> 其他组件
                </h3>
                
                <div class="grid md:grid-cols-2 gap-6">
                    <div>
                        <h4 class="font-medium text-gray-800 mb-2">缩略图：</h4>
                        <div class="code-block">
                            <pre><code>&lt;div class="thumbnail"&gt;
    &lt;img src="..." alt="..."&gt;
    &lt;div class="caption"&gt;
        &lt;h3&gt;标题&lt;/h3&gt;
        &lt;p&gt;描述...&lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
                        </div>
                        
                        <h4 class="font-medium text-gray-800 mt-4 mb-2">模态框：</h4>
                        <div class="code-block">
                            <pre><code>&lt;button data-toggle="modal" data-target="#myModal"&gt;
    打开模态框
&lt;/button&gt;

&lt;div class="modal fade" id="myModal"&gt;
    &lt;div class="modal-dialog"&gt;
        &lt;div class="modal-content"&gt;
            &lt;!-- 内容 --&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
                        </div>
                    </div>
                    
                    <div>
                        <h4 class="font-medium text-gray-800 mb-2">轮播图：</h4>
                        <div class="code-block">
                            <pre><code>&lt;div id="myCarousel" class="carousel slide"&gt;
    &lt;!-- 指示器 --&gt;
    &lt;ol class="carousel-indicators"&gt;
        &lt;li data-target="#myCarousel" data-slide-to="0"&gt;&lt;/li&gt;
    &lt;/ol&gt;
    
    &lt;!-- 轮播项目 --&gt;
    &lt;div class="carousel-inner"&gt;
        &lt;div class="item active"&gt;
            &lt;img src="..."&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    
    &lt;!-- 控制按钮 --&gt;
    &lt;a class="left carousel-control" href="#myCarousel" data-slide="prev"&gt;
        &lt;span class="glyphicon glyphicon-chevron-left"&gt;&lt;/span&gt;
    &lt;/a&gt;
    &lt;a class="right carousel-control" href="#myCarousel" data-slide="next"&gt;
        &lt;span class="glyphicon glyphicon-chevron-right"&gt;&lt;/span&gt;
    &lt;/a&gt;
&lt;/div&gt;</code></pre>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <!-- Footer -->
    <footer class="py-8">
        <div class="container mx-auto max-w-5xl px-4 text-center">
            <div class="text-white mb-2">
                <span class="font-medium">技术小馆</span>
            </div>
            <div>
                <a href="http://www.yuque.com/jtostring" class="text-gray-300 hover:text-white transition">http://www.yuque.com/jtostring</a>
            </div>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default'
        });
    </script>
</body>
</html>
```